// Vue 3 应用
// Vue 3 登录应用
const { createApp, ref } = Vue;

// 创建Vue应用实例
const app = createApp({
    // 使用组合式API
    setup() {
        // 响应式数据
        const username = ref('');
        const password = ref('');
        const loading = ref(false);
        const errorMessage = ref('');
        
        // 登录方法
        const login = async () => {
            // 重置错误消息
            errorMessage.value = '';
            
            // 表单验证
            if (!username.value.trim()) {
                errorMessage.value = '请输入用户名';
                return;
            }
            
            if (!password.value) {
                errorMessage.value = '请输入密码';
                return;
            }
            
            // 显示加载状态
            loading.value = true;
            
            try {
                // 发送登录请求到后端API
                const response = await axios.post('/api/auth/login', {
                    username: username.value,
                    password: password.value
                });
                
                // 登录成功后，保存token或用户信息
                if (response.data && response.data.token) {
                    localStorage.setItem('token', response.data.token);
                }
                
                // 显示成功消息
                alert('登录成功！');
                
                // 跳转到仪表盘页面
                window.location.href = '/dashboard.html';
            } catch (error) {
                // 处理错误
                if (error.response && error.response.data) {
                    errorMessage.value = error.response.data.message || '登录失败，请重试';
                } else if (error.request) {
                    errorMessage.value = '网络错误，请检查您的网络连接';
                } else {
                    errorMessage.value = '请求配置错误';
                }
                
                // 显示错误消息
                alert(errorMessage.value);
            } finally {
                // 隐藏加载状态
                loading.value = false;
            }
        };
        
        // 表单重置方法
        const resetForm = () => {
            username.value = '';
            password.value = '';
            errorMessage.value = '';
        };
        
        // 处理键盘事件
        const handleKeyPress = (event) => {
            if (event.key === 'Enter') {
                login();
            }
        };
        
        // 跳转到注册页面
        const goToRegister = () => {
            // 这里可以根据实际情况修改跳转到注册页面的逻辑
            alert('即将跳转到注册页面');
            // 实际应用中可以使用以下代码跳转到注册页面
            // window.location.href = '/register.html';
        };
        
        // 暴露给模板的数据和方法
        return {
            username,
            password,
            loading,
            errorMessage,
            login,
            resetForm,
            handleKeyPress,
            goToRegister
        };
    }
});

// 全局错误处理
app.config.errorHandler = (err, instance, info) => {
    console.error('Vue应用错误:', err);
    console.error('错误信息:', info);
    alert('应用发生错误，请刷新页面重试');
};

// 挂载应用
app.mount('#app');